<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理</title>
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
  <script src='../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js'></script>
  <script src='../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
  <link rel="stylesheet" href="../css/yhgl.css">
</head>
<body> 
  <header id="header" class="clearfix">
    <span>经销存管理系统</span>
    <div class="clearfix">
        <div>
            <span class="glyphicon glyphicon-triangle-bottom"></span>
        </div>
        <div>管理员</div>
        <div>
            <span class="glyphicon glyphicon-user"></span>
        </div>
</header>
<div id="left_nav">
    <div id="nav">
        <li id="nav_header">
            <span class="glyphicon glyphicon-cog"></span>
            系统菜单
            <span class="glyphicon glyphicon-chevron-down"></span>
        </li>
        <li page-data='page1'>分类管理</li>
        <li page-data='page2'>库存管理</li>
        <li page-data='page3'>入库管理</li>
        <li page-data='page4'>预警信息设置</li>
        <li page-data='page5'>出库管理</li>
        <li page-data='page6'>用户管理</li>
        <li page-data='page7'>修改密码</li>
    </div>
</div>
<div id="zong" class="clearfix">
  <div id="top" class="clearfix">
    <div>
      <ul class="clear" id="biaonei">
        <li id="top_left" onclick="anniu(this,0)"><span>查看用户</span></li>
        <li id="top_right" onclick="anniu(this,1)"><span>添加用户</span></li>
      </ul>
    </div>
    <div id="content_all" class="clear">

      <div class="content" class="clear">
       
        <table id="mytable">
          <thead id="mythead">
            <tr>
              <th>编号</th>
              <th>用户名</th>
              <th>姓名</th>
              <th>性别</th>
              <th>修改</th>
              <th>删除</th>
            </tr>
          </thead>
          <tbody id="mytbody">
    
          </tbody>
        </table>
      </div>
      <div class="content"> 
        <div id="tianjiayonghu">
          <div>
            <span>姓名/name</span>
            <input type="text" placeholder="姓名/name">
          </div>
          <div>
            <span>用户名/username</span>
            <input type="text" placeholder="用户名/username">
          </div>
          <div>
            <span>性别/sex</span>
            <input type="radio" name="1" value="nan">男
            <input type="radio" name="1" value="nv" style="margin-left: 20px;">女
            <p>性别...</p>
          </div>
          <div>
            <span>联系电话/phone</span>
            <input type="text" placeholder="请输入联系电话">
            <p>联系电话</p>
          </div>
          <div>
            <span>籍贯/place</span>
            <input type="text" placeholder="请输入籍贯">
            <p>籍贯</p>
          </div>
          <div>
            <span>电子邮件/Email</span>
            <input type="text" placeholder="输入你的电子邮件/Email">
            <p>邮箱你懂得...</p>
          </div>
          <div>
            <span>备注/ Introg</span>
            <input type="text" placeholder="输入备注">
            <p>250字以内...</p>
          </div>
        </div>
        <button id="btn3" type="button" data-toggle="modal" data-target="#tianjia">添加用户</button>
      </div> 
     
        
    </div>
 </div>
 
 

<!-- 删除 -->
<div class="modal fade" id="jyjl_deljyjl" tabindex="-1" role="dialog" aria-labelledby="jyjl_del">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5 class="modal-title" id="jyjl_del">操作确认</h5>
      </div>
      <div class="modal-body">
        <form>
          <h5>你确定要删除吗</h5>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
      </div>
    </div>
  </div>
</div>
</div>
<!-- 添加用户 -->
<div class="modal fade" id="tianjia" tabindex="-1" role="dialog" aria-labelledby="tianjia">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5 class="modal-title" id="tianjia">操作确认</h5>
      </div>
      <div class="modal-body">
        <form>
          <h5>你确定要添加新用户吗</h5>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" >确认</button>
      </div>
    </div>
  </div>
</div>
</div>
<!-- 修改 -->
<div class="modal fade" id="jyjl_xiugaijyjl" tabindex="-1" role="dialog" aria-labelledby="jyjl_xiugai">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="jyjl_xiugai">修改用户信息</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group clear form-inline">
            <label >编号</label>
            <input type="text"style="margin-left: 22px;width: 500px;" class="form-control" id="jyjl_xiugai1">
          </div>
          <div class="form-group form-inline">
            <label >用户名</label>
            <input type="text"style="margin-left: 8px;width: 500px;" class="form-control" id="jyjl_xiugai2">
          </div>
          <div class="form-group form-inline">
            <label>姓名</label>
            <input type="text"style="margin-left: 20px;width: 500px;" class="form-control" id="jyjl_xiugai3">
          </div>
          <div class="form-group form-inline">
            <label>性别</label>
            <input type="text" style="margin-left: 20px;width: 500px;" class="form-control" id="jyjl_xiugai4">
          </div>
       
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="qunding">确认</button>
      </div>
    </div>
  </div>
</div>



<script>

// 导航
    let h = $(window).height()
    let h_judge
    $('#left_nav').css({
      'height': h + 'px',
    })
    $('#nav>li:first-child').on('click', function () {
      pullDown($(this))
    })
    $('#nav>li:first-child').siblings().on('click', function () {
      jumpPage($(this))
    })
    function pullDown(obj) {
        let num = obj.siblings().length + 1
        if (!h_judge) {
            obj.parent().css({
                'height': num * 40 + 'px'
            })
            obj.children().last().css({
                'transform': 'rotate(180deg)'
            })
        } else {
            obj.parent().css({
                'height': 40 + 'px'
            })
            obj.children().last().css({
                'transform': 'rotate(0deg)'
            })
        }
        h_judge = !h_judge

    }
    function jumpPage(obj) {
        switch (obj.attr('page-data')) {
            case 'page1': location.href = './flgl.html';
            break
            case 'page2': location.href = './kcgl.html';
            break
            case 'page3': location.href = './rkgl.html';
            break
            case 'page4': location.href = './yjxxsz.html';
            break
            case 'page5': location.href = './ckgl.html';
            break
            case 'page6': location.href = './yhgl.html';
            break
            case 'page7': location.href = './xgmm.html';
            break
            }
        let page
        sessionStorage.setItem('page', obj.attr('page-data'))
    }
       let lData = [{
    "bh": "001","yhm": "用户1","xm": "张三1","xb": "男"
  },
  {
    "bh": "002","yhm": "用户2","xm": "张三2","xb": "男"
  },
  {
    "bh": "003","yhm": "用户3","xm": "张三3","xb": "男"
  },
  {
    "bh": "004","yhm": "用户4","xm": "张三4","xb": "男"
  },
  {
    "bh": "005","yhm": "用户5","xm": "张三5","xb": "男"
  },
  {
    "bh": "006","yhm": "用户6","xm": "张三6","xb": "男"
  },
  {
    "bh": "007","yhm": "用户7","xm": "张三7","xb": "男"
  },
  {
    "bh": "008","yhm": "用户8","xm": "张三8","xb": "男"
  },
  {
    "bh": "009","yhm": "用户9","xm": "张三9","xb": "男"
  },
  {
    "bh": "010","yhm": "用户10","xm": "张三10","xb": "男"
  },
  {
    "bh": "011","yhm": "用户11","xm": "张三11","xb": "男"
  },
  {
    "bh": "012","yhm": "用户12","xm": "张三12","xb": "男"
  },

]

let pageData = lData
function showTable(data) {
      $('#mytable tbody').html('')
      $.each(data, (index, item) => {
        $('#mytable tbody').append(`
          <tr>
            <td id="abc">${item.bh}</td>  
            <td>${item.yhm}</td>  
            <td>${item.xm}</td> 
            <td>${item.xb}</td> 
            <td>
              <button type="button" data-toggle="modal" data-target="#jyjl_xiugaijyjl"  id='but1'  onclick="bianji(this)"><span class="glyphicon glyphicon-edit"></span>编辑</button></button>  
            </td> 
            <td>
              <button type="button" data-toggle="modal" data-target="#jyjl_deljyjl" data-item='${JSON.stringify(item)}' class='del' id='but2'><span class="glyphicon glyphicon-trash"></span>删除</button>  
              
            </td>  
          </tr>
        `)
      })
    }
$('tbody').on('click', '.del', function () {
      console.log($(this).attr('data-item'))
      let obj = JSON.parse($(this).attr('data-item'))
      $(this).closest("tr").remove()
      console.log(obj)
    })
 
    showTable(lData)
  //  获取值
 function bianji(data){
  $('#jyjl_xiugai1').val($(data).parent().parent().find('td:nth-child(1)').text())
  $('#jyjl_xiugai2').val($(data).parent().parent().find('td:nth-child(2)').text())
  $('#jyjl_xiugai3').val($(data).parent().parent().find('td:nth-child(3)').text())
  $('#jyjl_xiugai4').val($(data).parent().parent().find('td:nth-child(4)').text())
 }

 $('#qunding').click(function(){
  let ld=$('#jyjl_xiugai1').val()
 let la =$('#jyjl_xiugai2').val()
 let lb=$('#jyjl_xiugai3').val()
 let lc=$('#jyjl_xiugai4').val()
   for(let i=0;i<lData.length;i++){
        if(lData[i].bh==ld){
          lData[i].yhm=la
          lData[i].xm=lb
          lData[i].xb=lc
          
        }
   }

 })

    
 
  let li=document.getElementsByTagName('li')
    
        function anniu(dianji,num){
            dianji.style.backgroundColor = 'rgb(36,104,169)'
            for (let i = 0; i < li.length; i++) {
              if (dianji!= li[i]) {
                li[i].style.backgroundColor = 'white'

            
        }
        }

        let content = document.getElementsByClassName('content')
          content[num].style.display = 'block'
            for (let i = 0; i < content.length; i++) {
            if (num != i) {
            content[i].style.display = 'none'
        }
      }
    }
    anniu(li[0], 0)

</script>
</body>
</html>